<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 图片</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>

<!--.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:500px 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。-->


<p> .img-thumbnail 类可制作图片缩略图:</p>
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

<h2>图片</h2>
<p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):
    .img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
</p>
<img src="/statics/images/course/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
</body>
</html>